<template>
	<view class="content">
		<view class="logo">
			<image src="../../static/logo-01.png" mode="widthFix"></image>
		</view>
		<view class="text">
			<text>服务好每一位顾客</text>
		</view>
		<!-- 登录表单 -->
		<view class="submi-from">
			<!-- 手机号登录 -->
			<uni-row class="demo-uni-row">
				<uni-forms class="from" ref="valiForm" :rules="rules" :modelValue="formData">
					<uni-forms-item name="phone">
						<uni-row class="demo-uni-row input">
							<uni-col :span="2">
								<text>+86</text>
							</uni-col>
							<uni-col :span="22">
								<uni-easyinput type="number" :inputBorder="false" v-model="formData.phone"
									placeholder="请输入手机号" />
							</uni-col>
						</uni-row>
					</uni-forms-item>
					<uni-forms-item name="captcha">
						<uni-row class="demo-uni-row input">
							<uni-col :span="span">
								<uni-easyinput prefixIcon="code" :style="{color: 'black'}" type="number"
									:inputBorder="false" v-model="formData.captcha" placeholder="请输入验证码" />
							</uni-col>
							<uni-col :offset="2" :span="6" class="code" v-if="loginCode">
								<text @click="getTime">获取验证码</text>
							</uni-col>
							<uni-col :offset="2" :span="2" class="code" v-else>
								<text>{{setTime}}s</text>
							</uni-col>
						</uni-row>

					</uni-forms-item>
					<!-- 密码登录 -->
					<view class="pwd-login">
						<text @click="toPwdLogin">密码登录</text>
					</view>

					<!-- 		<uni-forms-item name="password">
					<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
						placeholder="请输入密码" />
				</uni-forms-item> -->
				</uni-forms>
			</uni-row>
			<!-- d点击登录按钮 -->
			<uni-row class="demo-uni-row" style="margin-top: 30upx;">
				<button type="primary" :style="{background:topBackColor}" :disabled="loginCode"
					@click="submit('valiForm')">登录</button>
			</uni-row>
		</view>
		<!-- 注册表单 -->
		<view class="resgister-section">
			还没有账号？<text @click="toRegister">马上注册</text>
		</view>
	</view>

</template>
<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				formData: {
					phone: '',
					captcha: ''
					// password: '',
				},
				loginCode: true,
				loginflag: false,
				setTime: 60,
				span: 16,
				topBackColor: "rgb(173, 173, 173)",
				// 校验规则
				rules: {
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号!'
						}, {
							pattern: /^1[34578]\d{9}$/,
							errorMessage: '手机号格式不正确！'
						}]

					},
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码！'
						}, ]
					}
				}
			}
		},
		methods: {
			...mapMutations(['saveLoginInfo', 'saveCustomer', 'saveUserInfo']),
				...mapActions(['getCartGoodsList']),
			//提交短信登录
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					this.phoneLogin(res.phone, res.captcha)
					// uni.showToast({
					// 	title: `校验通过`
					// })
				}).catch(err => {
					console.log('err', err);
				})
			},
			//获取短信验证码
			getTime() {
				var phoneReg = /^1[34578]\d{9}$/;
				if (!phoneReg.test(this.formData.phone)) {
					uni.showToast({
						title: '请输入正确手机号',
						icon: 'none'
					})
					return
				}
				if (this.loginflag) {
					return
				}
				//发送短信验证码
				this.validatePhone(this.formData.phone)
			},
			//跳转密码登录页面
			toPwdLogin() {
				uni.redirectTo({
					url: '/pages/user/pwdLogin'
				});
			},
			//跳转注册页面
			toRegister() {
				uni.redirectTo({
					url: '/pages/user/register'
				});
			},
			//验证手机号是否存在
			async validatePhone(phone) {
				const {
					status,
					data,
					msg
				} = await this.$api.user.validatePhone({
					phone: phone
				})
				if (status != 200) {
					uni.showToast({
						title: '手机号不存在请注册！',
						icon: 'none'
					})
					return
				} else {
					this.loginCode = false
					this.topBackColor = "rgb(250,84,28)";
					this.span = 20;
					this.setTime = 60
					this.loginflag = true
					let time = setInterval(() => {
						if (this.setTime > 0) {
							this.setTime -= 1
						} else {
							this.loginCode = true
							this.setTime = 59
							this.span = 16;
							this.topBackColor = "rgb(173, 173, 173)";
							clearInterval(time)
						}
					}, 1000)
					//发送短信验证码
					this.verifyCode(phone)

				}
			},
			//发送短信验证码
			async verifyCode(phone) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.user.verifyCode({
						phone: phone
					})
				} catch (e) {
					console.log(e)
				}
			},
			//手机号登录
			async phoneLogin(telephone, captcha) {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.user.phoneLogin({
						telephone: telephone,
						captcha: captcha
					})
					// console.log(ms)
					if (status == 200) {

						uni.$u.toast('登录成功')
						//保存用户信息
						this.saveLoginInfo(data)
						//获取用户信息
						this.getUserInfo()
						//获取用户个人资料信息
						this.queryCustomer()
						//获取用户个人购物车列表
						this.getCartGoodsList();
						// console.log("sshd")
						//页面跳转
						// uni.switchTab({
						// 	url: '/pages/index/index'
						// });
						uni.navigateBack()
					} else if (status == 10000) {
						// uni.redirectTo({
						// 	url: '/pages/user/login'
						// })
						uni.$u.toast("验证码错误!")
					} else {
						// uni.redirectTo({
						// 	url: '/pages/user/login'
						// })
						uni.$u.toast("手机号已解绑!")
					}
				} catch (e) {
					console.log(e)
				}
			},
			//获取个人资料信息
			async queryCustomer() {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.customer.queryCustomer()
					if (status == 200) {
						data.tableCount = data.tableCount.toString()
						data.bookingAmount = data.bookingAmount.toString()
						//将用户资料信息保存到vuex中
						this.saveCustomer(data)
					}
				} catch (e) {
					console.log(e)
				}
			},
			//获取登录的用户信息
			async getUserInfo() {
				try {
					const {
						status,
						data,
						msg
					} = await this.$api.user.getUserInfo()
					if (status == 200) {
						//将用户信息保存到vuex中
						this.saveUserInfo(data)
					}
				} catch (e) {
					console.log(e)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: white;
	}

	.content {
		width: 100vm;
		height: 100vb;
		background-color: white;

		//页面logo样式
		.logo {
			position: relative;
			width: 200upx;
			height: 200upx;
			margin: auto;
			padding-top: 100upx;

			image {
				margin: auto;
				width: 200upx;
				height: 200upx;
				border-radius: 20%;
			}
		}

		// logo文本yyyyyyy样式
		.text {
			width: 40%;
			height: 50upx;
			margin: auto;
			text-align: center;
			line-height: 50upx;
			color: #737373
		}

		// 验证码样式
		.code {
			color: #FA541C;
			float: right;
		}

		//页面登录form表单样式
		.submi-from {
			width: 100%;
			height: 400upx;
			margin-top: 30upx;

			//密码登录
			.pwd-login {
				float: right;
				height: 30upx;
				line-height: 30upx;
				// margin-top: 10upx;
				text-align: center;
				margin-right: 10upx;
				color: #9b9b9b;
			}

			//手机号。验证码输入框
			.input {
				border-bottom: 1px solid rgb(229, 229, 229);

				text {
					font-size: 28upx;
					height: 70upx;
					line-height: 70upx;
					float: left;
				}

			}

			.from {
				width: 80%;
				margin: auto;
			}

			button {
				width: 80%;
				margin: auto;
				background-color: #FA541C;
				border-radius: 46upx;
			}


		}

		//没有账号马上，注册
		.resgister-section {
			position: absolute;
			bottom: 50upx;
			width: 100%;
			text-align: center;

			text {
				color: #FA541C;
			}
		}
	}
</style>